<template>
  <div>
    <el-form
      :inline="true"
      label-position="right"
      size="small"
      class="filter-form-inline"
      label-width="110px"
    >
      <el-row
        :gutter="40"
        style="margin-left: 0px; margin-right: 0px"
      >
        <el-col :span="24">
          <item-title title="基本信息" />
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同编号：">
            <span>{{ formData.contractNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同名称：">
            <span>{{ formData.contractName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同类型：">
            <span> {{ getLabel('contract_type', formData.contractType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同对象：">
            <span> {{ getLabel('contract_object', formData.contractObjectType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同开始日期：">
            <span> {{ dateFormat("yyyy-mm-dd",formData.contractBeginTime) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同结束日期：">
            <span> {{ dateFormat("yyyy-mm-dd",formData.contractEndTime) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="相对方名称：">
            <span>{{ formData.objectName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="归属部门：">
            <span>{{ formData.contractDepartmentName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同金额：">
            <span>{{ formData.contractAmount === 0 ? '' : isInteger(formData.contractAmount) }}</span>
            <span v-if="formData.contractAmount !== 0">元</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同负责人：">
            <span>{{ formData.contractHeadName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：">
            <span>{{ formData.creatorName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间：">
            <span> {{ dateFormat("yyyy-mm-dd HH:MM:SS",formData.createdAt) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合同附件：">
            <div style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;">
              <div
                v-for="(item,index) in formData.contractFile"
                :key="index"
                style="margin-right: 20px"
              >
                <el-button
                  type="text"
                  @click="handlDownload(item)"
                >
                  {{ item.name }}
                </el-button>
              </div>
            </div>

          </el-form-item>
        </el-col>
        <el-col :span="24">
          <item-title title="操作记录" />
        </el-col>
        <el-col :span="24">
          <operation-view
            :id="contractId"
            mode="contract"
          />
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {inject, onMounted, reactive, toRefs,} from 'vue'
import {downloadFile} from '@/utils/downloadFile'

export default {
  name: 'SalesDetail',
  props: {
    contractId: {
      type: Number,
      default() {
        return 0
      },
    },
  },
  setup(props, context) {
    const api = inject('api')
    var data = reactive({
      formData: {},
    })
    const handlDetail = async(id) => {
      const res = await api.terminal.SALES_DDETAIL(id)
      if (res.code === 0) {
        data.formData = res.data.contract
      }
    }

    const handlDownload = (url) => {
      downloadFile(url.url)
    }

    onMounted(() => {
      handlDetail(props.contractId)
    })

    return {
      ...toRefs(data),
      handlDownload,
      handlDetail,
    }
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
